<template>
  <div>
    <v-nav :current="4" @changelang="changelang"></v-nav>
    <img src="@/components/canping.png" alt="" style="width: 100%">
    <h1>{{title}}</h1>
    <div class="pro">
      <div class="pro-item" v-for="list in lists" :key="list.id" @click="toDetails(list.id)">
        <div>
          <img :src="list.src" alt="">
        </div>
        <span>{{list.post_title}}</span>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
import vNav from '@/components/nav/nav'
import vFooter from '@/components/footer'
import {mapGetters} from 'vuex'
import { getProductListData } from '@/services/api.js'
import { getProductListDataEn } from '@/services/api_en.js'
export default {
  data () {
    return {
      lists: [],
      title: null,
      id: null
    }
  },
  components: {
    vNav,
    vFooter
  },
  computed: {
    ...mapGetters({
      'lang': 'lang'
    })
  },
  methods: {
    _getChList (current) {
      this.title = this.$route.params.name
      this.id = this.$route.params.id
      console.log(this.$route.params.id)
      let params = {
        id: this.id
      }
      getProductListData(params).then((res) => {
        console.log(res)
        this.lists = res
      })
    },
    _getEnList (current) {
      this.title = this.$route.params.name
      this.id = this.$route.params.id
      let params = {
        id: this.id
      }
      getProductListDataEn(params).then((res) => {
        console.log(res)
        this.lists = res
      })
    },
    toDetails (current) {
      this.$router.push({name: 'productDetails', params: {id: current}})
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
      }
      if (this.lang === 2) {
        this._getEnList()
      }
    },
    changelang (res) {
      console.log('爽肤水' + res)
      if (res === 1) {
        this._getChList()
      }
      if (res === 2) {
        this._getEnList()
      }
    }
  },
  created () {
    this.version()
    // this.lists = [
    //   {
    //     id: 1,
    //     name: '抗感染用药1'
    //   },
    //   {
    //     id: 2,
    //     name: '抗感染用药2'
    //   },
    //   {
    //     id: 3,
    //     name: '抗感染用药3'
    //   },
    //   {
    //     id: 4,
    //     name: '抗感染用药4'
    //   },
    //   {
    //     id: 5,
    //     name: '抗感染用药5'
    //   }
    // ]
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../util/common.scss';
h1 {
  padding: 36rem/$font-size-base 0;
  font-size: 30rem/$font-size-base;
  letter-spacing: 1px;
  color: #333;
  font-weight: bolder;
  text-align: left;
  padding-left: 30rem/$font-size-base;
}
.pro {
  width: 690rem/$font-size-base;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px solid #e6e6e6;
  padding-top: 33rem/$font-size-base;
  .pro-item {
    div {
      width: 326rem/$font-size-base;
      height: 218rem/$font-size-base;
      background-color: #ffffff;
      border: solid 1px #cccccc;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 260rem/$font-size-base;
        height: 191rem/$font-size-base;
      }
    }
    span {
      display: block;
      font-size: $baseFontSize2;
      color: $font-color-base;
      text-align: center;
      margin-top: 28rem/$font-size-base;
      padding-bottom: 39rem/$font-size-base;
      width: 326rem/$font-size-base;
      word-wrap: break-word;
    }
  }
}
</style>
